<template>
  <!-- eslint-disable -->
  <div style="padding: 30px;">
    <h3 class="mainTitle">{{ action == 'new' ? '新增学生' : '编辑学生' }}</h3>
    <div class="studentOperation">
      <!-- 基本信息 -->
      <div class="basicInformation">
        <div class="modelTitle">基本信息</div>
        <el-form ref="basicForm" label-width="100px" label-position="left">
          <el-form-item label="学号" prop="no">
            <el-input v-model="sendParams.no" placeholder="必填，请输入，少于20个数字" maxlength="20" style="width: 400px;" v-if="action == 'new'"></el-input>
            <span v-else>{{ sendParams.no }}</span>
          </el-form-item>
          <el-form-item label="绑定手机" prop="mobile">
            <el-input v-model="sendParams.mobile" placeholder="必填，请输入，11位合法手机数字" maxlength="11" style="width: 400px;"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="sendParams.name" placeholder="必填，请输入，少于5个中文字" maxlength="5" style="width: 400px;" v-if="action == 'new'"></el-input>
            <span v-else>{{ sendParams.name }}</span>
          </el-form-item>
          <el-form-item label="头像" prop="avatar" class="unique">
            <UploadAvatar v-model="sendParams.avatar" tipmsg="选填，请上传100 * 100px的jpg.png格式的图片" />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="sendParams.gender" v-if="action == 'new'">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
            <span v-else>{{ sendParams.gender == 1 ? '男' : '女' }}</span>
          </el-form-item>
          <el-form-item label="出生年月" prop="birth">
            <el-date-picker
              v-model="sendParams.birth"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选填，请选择出生年月">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <!-- 学业信息 -->
      <div class="academicInformation">
        <div class="modelTitle">学业信息</div>
        <el-form ref="academicForm" label-width="100px" label-position="left">
          <el-form-item label="所属院校" prop="school">
            <el-select v-model="sendParams.school" disabled>
              <el-option :value='$store.state.user.academy' :label="$store.state.user.academy">{{ $store.state.user.academy }}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属院系" prop="academy_department">
            <el-select v-model="sendParams.academy_department" @change="handleChoDepartment">
              <el-option
                v-for="item in departmentsList"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
              <!-- v-model="sendParams.academy_major" -->
          <el-form-item label="所属专业" prop="academy_major">
            <el-cascader
              v-model="choMajor"
              placeholder="请选择专业"
              :options="majorsList"
              :props="defaultProps"
              class="inputWidth"
              clearable
              @change="handleCascaderChange"
            />
          </el-form-item>
          <el-form-item label="入学年份" prop="start_year">
            <el-select v-model="sendParams.start_year">
              <el-option
                v-for="item in inSchoolYearList"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业年份" prop="end_year">
            <el-select v-model="sendParams.end_year">
              <el-option
                v-for="item in outSchoolYearList"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <el-button type="primary" style="width:100px;margin-left: 30px;" @click="handleComfirmClick" :loading="comfirmLoading">确定</el-button>
    <el-button style="width:100px;margin-top: 30px;" @click="handleCancelClick">取消</el-button>
  </div>
</template>

<script>
import { getDepartments, getMajors, getYears, addNewStudent, modifyStudent, getStudentDetail } from '../../../api/student'
export default {
  components: {
    UploadAvatar: () => import('../../informationNetwork/Upload')
  },
  data() {
    return {
      action: 'new',
      departmentsList: [], // 院系列表
      majorsList: [], // 专业列表
      inSchoolYearList: [], // 入学年份列表
      outSchoolYearList: [], // 毕业年份列表
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'name'
      },
      studentId: null,
      choMajor: ['计算机科学类', 12],
      sendParams: {
        no: '',
        mobile: '',
        name: '',
        avatar: '',
        gender: 1,
        birth: '',
        school: null,
        academy_department: '',
        academy_major: '',
        academy_catalog: '',
        start_year: '',
        end_year: ''
      },
      comfirmLoading: false
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.action = 'modify'
      this.studentId = this.$route.query.id
      this.getStudentDetail(this.studentId)
    } else {
      this.action = 'new'
      this.sendParams.school = this.$store.state.user.academy
    }
    this.getDepartments()
    this.getInSchoolYears()
    this.getOutSchoolYears()
  },
  methods: {
    getStudentDetail(id) {
      getStudentDetail(id).then(res => {
        this.sendParams = res
        this.sendParams.school = this.$store.state.user.academy
        if (this.action === 'modify') {
          this.getMajors(this.sendParams.academy_department)
          this.choMajor.push(this.sendParams.academy_catalog)
          this.choMajor.push(this.sendParams.academy_major)
        }
      })
    },
    // 返回
    handleCancelClick() {
      this.$router.push({ path: '../employment/student' })
    },
    // 获取院系列表
    getDepartments() {
      getDepartments().then(res => {
        this.departmentsList = res
      })
    },
    // 获取专业列表
    getMajors(value) {
      getMajors({ college_name: value }).then(res => {
        this.majorsList = res
      })
    },
    // 获取入学年份列表
    getInSchoolYears() {
      getYears({
        start: 2000,
        step: 20
      }).then(res => {
        this.inSchoolYearList = res
      })
    },
    // 获取毕业年份列表
    getOutSchoolYears() {
      getYears({
        start: 2000,
        step: 30
      }).then(res => {
        this.outSchoolYearList = res
      })
    },
    // 选择父级菜单
    handleCascaderChange(value) {
      this.choMajor = value
      if (value) {
        this.sendParams.academy_major = value[value.length - 1]
        this.sendParams.academy_catalog = value[0]
      }
    },
    handleComfirmClick() {
      this.comfirmLoading = true
      if (this.action === 'new') { // 新增
        addNewStudent(this.sendParams).then(res => {
          this.$message({
            type: 'success',
            message: '新增学生信息成功！'
          })
          this.$router.push({ path: '../employment/student' })
        }).finally(() => {
          this.comfirmLoading = false
        })
      } else { // 修改
        modifyStudent(this.studentId, this.sendParams).then(res => {
          this.$message({
            type: 'success',
            message: '学生信息修改成功！'
          })
          this.$router.push({ path: '../employment/student' })
        }).finally(() => {
          this.comfirmLoading = false
        })
      }
    },
    handleChoDepartment(value) {
      this.getMajors(value)
    }
  }
}
</script>

<style lang="scss" scoped>
  .studentOperation {
    display: flex;
    justify-content: space-between;
    .modelTitle {
      color: #222;
      font-weight: bold;
      font-weight: 14px;
      margin-bottom: 20px;
    }
    .basicInformation {
      width: 40%;
      padding: 0 30px;
    }
    .academicInformation {
      width: 60%;
      padding-left: 100px;
      border-left: 1px solid #ddd;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .upload {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .text {
      margin-left: 20px;
      color: #bbb;
    }
  }
  .el-button:focus, .el-button:hover {
    color: #0C66FF;
    border-color: #0C66FF;
    background-color: #fff;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }
</style>
